<template>
  <section>
    <span
      v-if="listType == 'picture-card'"
      class="c-upload"
      :class="{
        small: $props.small,
        middle: $props.middle,
        xsmall: $props.xsmall,
        [$attrs.class]: true
      }"
      @paste="pasteImg"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <draggable
        v-model="fileList"
        item-key="index"
        class="c-upload-list"
        draggable=".c-upload-item-wrap"
        @end="onDragEnd"
      >
        <!-- <template #item="{ element ,index}"> -->
        <div
          v-if="showPictureCard"
          v-for="(element, index) in fileList"
          :key="element.uid"
          class="c-upload-item-wrap"
        >
          <div class="c-upload-item">
            <a-spin :spinning="!element.ossUrl">
              <span v-if="element.ossUrl" class="c-upload-item-image">
                <img
                  v-if="isImage(element.ossUrl)"
                  v-lazyLoad="element.ossUrl"
                  :data-w="w"
                  :alt="element.ossName"
                />
                <div v-else-if="isVideo(element.ossUrl)">
                  <img
                    :src="generateVideoPoster(element.ossUrl)"
                    :data-w="w"
                    :alt="element.ossName"
                  />
                </div>
                <div v-else>
                  <a-icon type="file-text" style="font-size: 28px" />
                </div>
              </span>
            </a-spin>
            <span class="c-upload-item-action">
              <a-icon
                type="edit"
                v-if="isDrawing && !disabled"
                @click="handleDrawImg(element, index)"
              />
              <a-icon type="eye" @click="handlePreview(element)" />
              <a-icon
                type="download"
                class="mr10 ml10"
                @click="downloadImg(element)"
              />
              <a-popconfirm
                title="确定删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="onDelete(index)"
              >
                <a-icon v-if="!disabled" class="cp" type="delete" />
              </a-popconfirm>
            </span>
          </div>
          <slot :record="element" :index="index" />
        </div>

        <label
          v-if="!disabled && state.fileList.length < limitNum && showUpload"
          role="button"
          class="c-upload-item c-upload-select"
          @drop="dropEvent"
          @dragover="allowDrop"
        >
          <a-icon type="plus" />
          <input
            type="file"
            class="uploadImg"
            :accept="state.accept"
            :disabled="disabled"
            :multiple="multiple"
            style="display: none"
            @change="handlerChange"
          />
          <div style="z-index: -1; overflow: auto" class="pa w100p h100p">
            <input ref="inputPaste" type="text" class="w100p h100p" />
          </div>
        </label>
      </draggable>
    </span>
    <!-- 拖拽 text -->
    <div
      v-else
      class="c-upload-drag"
      v-bind="$attrs"
      @paste="pasteImg"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <a
        v-if="!disabled && isText"
        href="javascript:;"
        style="font-size: 12px"
        @click="$refs.input.click()"
        >{{ text }}
        <input
          ref="input"
          type="file"
          class="uploadImg"
          :accept="state.accept"
          :multiple="multiple"
          style="display: none"
          @change="handlerChange"
        />
      </a>
      <label
        v-if="!disabled && !isText"
        role="button"
        class="c-upload-drag-select"
        :class="isDragger ? '' : listType"
        @drop="dropEvent"
        @dragover="allowDrop"
      >
        <template v-if="isDragger">
          <a-icon type="inbox" style="font-size: 36px; color: #40a9ff" />
          <span> 点击或将文件拖拽到这里上传</span>
        </template>
        <template v-else>
          <a-icon type="upload" class="mr10" />
          Click to Upload
        </template>

        <input
          type="file"
          class="uploadImg"
          :accept="state.accept"
          :multiple="multiple"
          style="display: none"
          @change="handlerChange"
        />
        <div
          v-if="isDragger"
          style="z-index: -1; overflow: auto"
          class="pa w100p h100p"
        >
          <input ref="inputPaste" type="text" class="w100p h100p" />
        </div>
      </label>
      <div v-if="fileList.length" class="c-upload-drag-list">
        <div
          v-for="(element, index) in fileList"
          :key="element.uid"
          class="c-upload-drag-item"
        >
          <a-spin
            :spinning="!element.ossUrl"
            size="small"
            :tip="`${element.ossName}上传中...`"
          >
            <span v-if="element.ossUrl" class="c-upload-drag-item-con">
              <a-icon type="paper-clip" class="mr10" style="color: #40a9ff" />
              <span class="f1 filename">
                <a-tooltip>
                  <template slot="title">
                    <span style="word-break: break-all">{{
                      element.ossName
                    }}</span>
                  </template>
                  {{ element.ossName }}
                </a-tooltip>
              </span>
              <span v-if="element.operator" class="mr50">{{
                element.operator
              }}</span>
              <span v-if="element.createTime" class="mr20">{{
                element.createTime
              }}</span>
              <div class="c-upload-drag-item-action">
                <a-icon
                  type="download"
                  class="mr10 ml10"
                  @click="downloadImg(element)"
                />
                <a-popconfirm
                  title="确定删除?"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="onDelete(index)"
                >
                  <a-icon v-if="!disabled" class="cp" type="delete" />
                </a-popconfirm>
              </div>
            </span>
          </a-spin>
        </div>
      </div>
    </div>
    <!-- 视频播放 -->
    <a-modal
      :visible="videoVisible.visible"
      title="查看视频"
      ok-text="确定"
      cancel-text="取消"
      width="500px"
      :destroy-on-close="true"
      @cancel="videoVisibleCancel"
      @ok="videoVisibleCancel"
    >
      <video controls autoplay loop style="width: 100%; height: 100%">
        <source :src="videoVisible.url" />
        Your browser does not support the video tag.
      </video>
    </a-modal>
    <preview
      v-if="state.isPreview && !previewMountGlobal"
      :visible="state.isPreview"
      :file="state.previewImage"
      :file-list="state.fileList"
      @close="closePreview"
    />
    <Sketchpad ref="sketchpadRef" />
  </section>
</template>
<script>
import draggable from 'vuedraggable'
import preview from '../preview.vue'
import Sketchpad from '../business/Sketchpad'
import uploadMixin from './uploadMixin'
export default {
  mixins: [uploadMixin],
  props: {
    showPictureCard: {
      type: Boolean,
      default: true
    }
  },
  components: {
    draggable,
    preview,
    Sketchpad
  }
}
</script>
<style lang="less" scoped>
.c-upload {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;

  &-list {
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    &-wrap {
      display: flex;
      flex-direction: column;
    }
    display: flex;
    width: 100px;
    height: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 6px;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
    position: relative;
    border-radius: 2px;
    &:hover {
      cursor: pointer;
      .c-upload-item-image::before {
        opacity: 1;
      }
      .c-upload-item-action {
        opacity: 1;
      }
    }
    &-action {
      position: absolute;
      top: 50%;
      z-index: 10;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      opacity: 0;
      left: 50%;
      transition: all 0.3s;
      :deep .anticon {
        z-index: 10;
        width: 16px;
        margin: 0 4px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
      }
    }
    :deep .ant-spin-container,
    .ant-spin-nested-loading {
      height: 100%;
      width: 100%;
    }
    &-image {
      position: relative;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      &::before {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: all 0.3s;
        content: ' ';
      }

      img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
  &-select {
    float: left;
    border: 1px dashed #d9d9d9;
    &:hover {
      border-color: #1890ff;
    }
  }
  &.small {
    .c-upload-item {
      width: 60px;
      height: 60px;
      padding: 2px;
      &-action {
        :deep .anticon {
          z-index: 10;
          width: 14px;
          font-size: 14px;

          &.anticon-delete {
            position: absolute;
            top: -25px;
            right: -15px;
            color: red;
          }
        }
      }
    }
  }

  &.xsmall {
    .c-upload-item {
      width: 50px;
      height: 50px;
      padding: 0px;
      &-action {
        :deep .anticon {
          z-index: 10;
          width: 12px;
          font-size: 12px;

          &.anticon-delete {
            position: absolute;
            top: -20px;
            right: -10px;
            color: red;
          }
        }
      }
    }
  }
  &.middle {
    .c-upload-item {
      width: 80px;
      height: 80px;
      padding: 4px;
    }
  }
}
.c-upload-drag {
  position: relative;
  width: 100%;
  height: 100%;
  :deep .ant-spin-container,
  .ant-spin-nested-loading {
    height: 100%;
    width: 100%;
  }
  :deep(.ant-spin-spinning) {
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  &-select {
    display: flex;
    padding: 0;
    height: 60px;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    background: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s;
    &.text {
      width: unset;
      height: unset;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      width: 150px;
      padding: 8px;
    }
    &:hover {
      cursor: pointer;
    }
  }
  &-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    padding: 4px 12px 4px 4px;
    position: relative;
    margin-top: 8px;
    font-size: 14px;
    transition: background-color 0.3s;
    width: 100%;
    &-con {
      display: flex;
      height: 100%;
      align-items: center;
      line-height: normal;
    }
    &-action {
      opacity: 0;
    }
    &:hover {
      background-color: #f5f5f5;
      .c-upload-drag-item-action {
        opacity: 1;
      }
    }
    .filename {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.col2 {
  .c-upload-drag-item {
    width: 50%;
  }
}
.col1 {
  .c-upload-drag-item {
    width: 100%;
  }
}
.col3 {
  .c-upload-drag-item {
    width: 33.3%;
  }
}
.mb40 {
  margin-bottom: 40px;
}
</style>
